<script>
// 渠道列表页，弹窗会另抽出组件
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQrList'
})
</script>
<script setup>
import {
	reqAutoaddGrouping,
	reqQrGroupUpdate,
	reqAutoList,
	autogroupDetails,
	reqAutoDel,
	userAutogroupGroupings
} from '@/api'
import MyIcon from '@/components/my-icon/index.vue'
import UpdateGrouping from './list/updateGrouping.vue'
import DelGrouping from './list/delGrouping.vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// group
const isRefresh = ref(true)
const Route = useRoute()
const router = useRouter()
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const deletelist = (val) => {
	ElMessageBox.confirm('确定删除当前数据信息?', '删除', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'Warning'
	})
		.then(() => {
			reqAutoDel({ id: val.id }).then((res) => {
				getqrList(itemsdata.value, activeGroupIndex.value)
				ElMessage({
					type: 'success',
					message: res.msg
				})
			})
			// handleChangegroupName()
			// getqrList()
			getGroupList()
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消'
			})
		})
}
const emits = (val) => {
	router.push({ path: 'addautogroup', query: { id: val.id, type: '2' } })
}
const groupList = ref([])
const groupName = ref('')
const updateGrouping = ref(null)
const delGrouping = ref(null)
const isShowAddGroupName = ref(false)
const activeGroupIndex = ref(0)
const hoverGroupIndex = ref('')
// table
const qrList = ref([])
const multipleTableRef = ref()
const multipleSelection = ref([])
const selectAll = ref(false)
const total = ref(0)

const groupingId = ref('')
const handleChangegroupName = async () => {
	// const r = reqAutoaddGrouping({
	// 	name: groupName.value,
	// 	id: groupList.value.id
	// })
	// console.log(r)
	// if (r.status != 'error' ) {
	// 	ElMessage.success('请求成功')
	// 	getGroupList()
	// }
	// console.log('22222', groupingId.value)
	reqAutoaddGrouping({
		name: groupName.value,
		id: groupList.value.id
	}).then(res=>{
			ElMessage.success('请求成功')
		getGroupList()
	})
}
const pageNo = ref(1)
const itemsdata = ref()
const getqrList = async (item, index) => {
	activeGroupIndex.value = index
	itemsdata.value = item
	const r = await reqAutoList({
		page: pageNo.value,
		size: 10,
		name: nameList.value, //名称查询
		grouping_id: item.id
	})
	if (r) {
		qrList.value = r.data.group_list.item
		total.value = r.data.group_list.count
	}
	console.log('分组id', groupList.value.id)
}

// 添加分组
const getGroupList = async () => {
	const r = await reqAutoList()
	groupList.value = r.data.grouping_list
	// activeGroupIndex.value=0
	getqrList(groupList.value[0], 0)
	handleRefresh()
}
const getData = async () => {
	await getGroupList()
	// getqrList()
}
getData()
const handleCurrentChange = (val) => {
	console.log(`current page: ${val}分页请求接口`)
	pageNo.value = val
	getqrList(itemsdata.value, activeGroupIndex.value)
}
// 修改/删除分组
const showDialog = (name, val) => {
	console.log(name, val)
	switch (name) {
		case 'updateGroup':
			updateGrouping.value.show(val)
			break
		case 'deleGroup':
			delGrouping.value.show(val)
			break
	}
}
const handle = (name, val) => {
	console.log('操作', name, val)
	switch (name) {
		case 'data':
			break
		case 'detail':
			break
		case 'download':
			break
		case 'update':
			break
		case 'delete':
			break
	}
	updateGrouping.value.show(val)
}
const select = (name) => {
	switch (name) {
		case 'all':
			break
		case 'current':
			break
	}
}
const handleSelectAll = () => {
	multipleTableRef.value.clearSelection()
	if (selectAll.value) {
		qrList.value.forEach((row) => {
			multipleTableRef.value.toggleRowSelection(row, undefined)
		})
	}
}

const handleSelectionChange = (val) => {
	multipleSelection.value = val
	if (multipleSelection.value.length == qrList.value.length) {
		selectAll.value = true
	} else {
		selectAll.value = false
	}
}
const addautogroup = () => {
	router.push( {path: 'addautogroup', query: {  type: '0' }})
}
const dialogVisible = ref(false)
const dialogVisibledata = ref()
const details = (val) => {
	autogroupDetails({ id: val.id }).then((res) => {
		dialogVisibledata.value = res.data
		dialogVisible.value = true
	})
}
// 搜索
const nameList = ref('')
// const search = () => {
// 	if (check.value(nameList.value)) {
// 		ElMessage.success({
// 			type: 'error',
// 			message: '输入为空'
// 		})
// 		getqrList()
// 	} else {
// 		const length = qrList.value.length
// 		for (var i = 0; i < length; i++) {
// 			if (qrList.value[0].ArticleTitle.includes(nameList.value)) {
// 				qrList.value.push(qrList.value[0])
// 				qrList.value.shift()
// 			} else {
// 				qrList.value.shift()
// 			}
// 		}
// 	}
// }
// 通过正则验证输入 是否为空
const check = (string) => {
	var content = string
	if (content.replace(/(^\s*)|(\s*$)/g, '') == '') return true
}
const search = () => {
	getqrList(itemsdata.value, activeGroupIndex.value)
}
const downloadImage = (url, downloadName) => {
	const link = document.createElement('a')
	link.setAttribute('download', downloadName)
	const image = new Image()
	// 添加时间戳，防止浏览器缓存图片
	image.src = url + '?timestamp=' + new Date().getTime()
	// 设置 crossOrigin 属性，解决图片跨域报错
	image.setAttribute('crossOrigin', 'Anonymous')
	image.onload = () => {
		link.href = getImageBase64(image)
		link.click()
	}
}
const getImageBase64 = (image) => {
	const canvas = document.createElement('canvas')
	canvas.width = image.width
	canvas.height = image.height
	const ctx = canvas.getContext('2d')
	ctx.drawImage(image, 0, 0, image.width, image.height)
	// 获取图片后缀名
	const extension = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase()
	// 某些图片 url 可能没有后缀名，默认是 png
	return canvas.toDataURL('image/' + extension, 1)
}
const groupingshow = ref(false)
const groupingdata = ref()
const grouping = () => {
	console.log(multipleSelection.value)
	if (multipleSelection.value.length > 0) {
		groupingshow.value = true
	} else {
		ElMessage({
			message: '请选择要进行分组的数据',
			type: 'warning'
		})
	}
}
const groupingshowapi = () => {
	if (groupingdata) {
		var ids = []
		for (var i = 0; i < multipleSelection.value.length; i++) {
			ids.push(multipleSelection.value[i].id)
		}
		userAutogroupGroupings({ ids: ids, grouping_id: groupingdata.value }).then((res) => {
			getqrList(itemsdata.value, activeGroupIndex.value)
			ElMessage({
				type: 'success',
				message: res.msg
			})
			groupingshow.value = false
		})
	} else {
		ElMessage({
			message: '请选择分组',
			type: 'warning'
		})
	}
}
const modify = () => {
	if (multipleSelection.value.length > 0) {
		var ids = ''
		for (var i = 0; i < multipleSelection.value.length; i++) {
			if (i == 0) {
				ids = multipleSelection.value[i].id
			} else {
				ids = ids + ',' + multipleSelection.value[i].id
			}
		}
		router.push({ path: 'addautogroup', query: { id: ids, type: '1' } })
	} else {
		ElMessage({
			message: '请选择要进行批量修改的数据',
			type: 'warning'
		})
	}
}
</script>

<template>
	<div class="app-container">
		<div>
			<el-button class="app-btn" type="primary" @click="addautogroup('showEditQr')">新建拉群</el-button>
			<el-button class="app-btn" @click="modify">批量修改</el-button>
			<el-button class="app-btn" @click="grouping()">批量分组</el-button>
			<span style="width: 200px; float: right">
				<el-input
					v-model="nameList"
					class="w-50 m-2"
					placeholder="请输入名称搜索"
					@keyup.enter.native="search"
					:suffix-icon="Search"
				/>
			</span>
		</div>
		<div class="app-gap-block-top qr-main">
			<div class="qr-main-left-nav app-container-radius">
				<div class="app-title-underline app-flex-left app-container" @click="isShowAddGroupName = true">
					<MyIcon class="app-icon app-pointer" name="AntDesignPlusSquare" />
					<span class="app-gap-words-left-s app-pointer">添加分组</span>
				</div>
				<div class="">
					<div v-show="isShowAddGroupName" class="app-container-side app-gap-block-top">
						<el-input
							v-on:keyup.enter="handleChangegroupName"
							v-model="groupName"
							maxlength="18"
							placeholder="输入名称后回车"
							show-word-limit
							type="text"
							clearable
						/>
					</div>

					<div
						v-if="isRefresh"
						class="app-gap-block-top"
						:class="isShowAddGroupName ? 'cell-list-show-input' : 'cell-list'"
					>
						<div
							@mouseover="hoverGroupIndex = index"
							@click="getqrList(item, index)"
							activeGroupIndex="index"
							isShowAddGroupName="false"
							:class="[
								activeGroupIndex == index ? 'left-bar-cell-active' : 'left-bar-cell',
								hoverGroupIndex == index ? 'cell-hover' : ''
							]"
							v-for="(item, index) in groupList"
							:key="index"
							style="cursor: pointer"
						>
							<MyIcon class="app-icon file-icon" name="File" />
							<div class="app-flex-2 cell-width">
								<span class="cell-name">{{ item.name }}</span>
								<span class="cell-count">{{ item.size }}</span>
							</div>
							<el-popover
								popper-style="padding: 0px;min-width:0px"
								v-if="hoverGroupIndex == index && index != 0 && index != 1"
								placement="right"
								:width="100"
								trigger="hover"
							>
								<div>
									<div class="app-hover-cell" @click="showDialog('updateGroup', item)">修改名称</div>
									<div class="app-hover-cell" @click="showDialog('deleGroup', item)">删除分组</div>
								</div>
								<template #reference>
									<div class="cell-more">
										<MyIcon class="app-icon more-icon" name="MoreVertical" />
									</div>
								</template>
							</el-popover>
						</div>
					</div>
				</div>
			</div>
			<div class="select-table-body app-container-radius">
				<el-table
					class="app-select-table app-select-table-wh app-container-radius"
					ref="multipleTableRef"
					:data="qrList"
					style="width: 100%"
					@selection-change="handleSelectionChange"
				>
					<el-table-column type="selection" fixed="left"> </el-table-column>
					<el-table-column width="130" fixed="left" prop="qrCode">
						<template #header>
							<div class="app-flex-left">
								<span class="primary-font">选择全部任务</span>
								<el-popover popper-style="padding: 0px;min-width:0px" placement="right" :width="100" trigger="hover">
									<div>
										<div class="app-hover-cell" @click="select('all')">全部</div>
										<div class="app-hover-cell" @click="select('current')">当前页面</div>
									</div>
									<template #reference>
										<MyIcon class="app-down-icon primary-font" name="Down" />
									</template>
								</el-popover>
							</div>
						</template>

						<template #default="scope">
							<div>{{ scope.row.name }}</div>
							<!-- <el-image :src="scope.row.qr_code" class="a-w100h100" /> -->
						</template>
					</el-table-column>
					<!-- <el-table-column prop="name" label="名称" width="140" align="left" /> -->
					<el-table-column prop="name" label="群聊" width="280" align="left">
						<template #default="scope">
							<div v-for="(item, index) in scope.row.group_data" :key="index">
								<div class="groupchat">
									<div class="groupchat-img">
										<img :src="item.code" alt="" />
									</div>
									<div class="groupchat-title">{{ item.name }}</div>
									<div style="float: left; margin-top: 3px">({{ item.size }})</div>
								</div>
								<div style="height: 35px; display: inline-block">
									<div class="groupchat-type" v-if="item.status == 1">拉人中</div>
									<div class="groupchat-type" v-if="item.status == 2">未开启</div>
									<div class="groupchat-type" v-if="item.status == 3">已完成</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="join_type" label="入群方式" width="100" align="left">
						<template #default="scope">
							<div v-if="scope.row.join_type == 1">直接入群</div>
							<div v-if="scope.row.join_type == 2">需添加员工</div>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="拉群方式" width="120" align="left">
						<template #default="scope">
							<div v-if="scope.row.type == 1">群二维码拉群</div>
							<div v-if="scope.row.type == 2">企微活码拉群</div>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" width="100" align="left" />
					<el-table-column prop="staff" width="210" align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">使用成员</span>
								<!-- <el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container app-flex-left">
										<div class="app-words-box">
											<div class="app-flex-left">
												<MyIcon class="app-down-icon primary-font" name="Person" />
												<span class="app-gap-words-left-xs">上线状态</span>
											</div>
										</div>
										<div class="app-disable app-words-box app-gap-words-left">
											<div class="app-flex-left">
												<MyIcon class="app-down-icon primary-font" name="Person" />
												<span class="app-gap-words-left-xs">下线状态</span>
											</div>
										</div>
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover> -->
							</div>
						</template>
						<template #default="scope">
							<div class="app-words-box-set">
								<div
									class="app-words-box-item app-gap-words-left"
									v-for="(item, index) in scope.row.staffs"
									:key="index"
								>
									<div class="app-words-box" v-if="item.show">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ item }}</span>
										</div>
									</div>
									<div v-else class="app-disable app-words-box">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ item }}</span>
										</div>
									</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="standby " width="120" align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">备用成员</span>
								<!-- <el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container">
										统计添加渠道码的人次，若客户重复添加将不会重复计数
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover> -->
							</div>
						</template>
						<template #default="scope">
							<div class="app-words-box-set">
								<div
									class="app-words-box-item app-gap-words-left"
									v-for="(item, index) in scope.row.standby"
									:key="index"
								>
									<div class="app-words-box" v-if="item.show">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ item }}</span>
										</div>
									</div>
									<div v-else class="app-disable app-words-box">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ item }}</span>
										</div>
									</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="staff " label="添加好友数" width="100" align="left"> </el-table-column>
					<el-table-column prop="tags" label="标签" width="200" align="left"> 
					 	<template #default="scope">
					 <el-tag class="app-br-10" v-for="(item,index) in scope.row.tags" :key="index">
                  <span class="app-regular-font ">{{item}}</span>
                  </el-tag>
									</template>
					</el-table-column>
					<!-- <el-table-column prop="staff " label="拉群方式" width="90" align="left"> </el-table-column> -->
					<el-table-column width="160" fixed="right">
						<template #header>
							<span class="primary-font">操作</span>
						</template>
						<template #default="scope">
							<!-- <span class="primary-font pointer" @click="handle('data',scope,row)">数据统计</span> -->
							<!-- <span class="weak-grey-font app-gap-words-left-s">|</span> -->
							<span
								class="primary-font app-gap-words-left-s pointer"
								style="cursor: pointer"
								@click="details(scope.row)"
								>详情</span
							>
							<span class="weak-grey-font app-gap-words-left-s">|</span>
							<span
								class="primary-font app-gap-words-left-s pointer"
								style="cursor: pointer"
								@click="downloadImage(scope.row.qrcodes, scope.row.name)"
								>下载</span
							>
							<span class="weak-grey-font app-gap-words-left-s">|</span>
							<el-popover popper-style="padding: 0px;min-width:0px"  placement="left" :width="100" trigger="hover">
								<div>
									<div class="app-hover-cell" style="cursor: pointer" @click="emits(scope.row)">修改</div>
									<div class="app-hover-cell" style="cursor: pointer" @click="deletelist(scope.row)">删除</div>
								</div>
								<template #reference>
									<span class="primary-font app-gap-words-left-s pointer" style="cursor: pointer">编辑</span>
								</template>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					class="app-page"
					@current-change="handleCurrentChange"
					background
					layout="prev, pager, next"
					:total="total"
				/>
			</div>
		</div>
		<UpdateGrouping ref="updateGrouping" @diaUpdate="getGroupList" />
		<DelGrouping ref="delGrouping" @diaUpdate="getGroupList" />
	</div>
	<el-dialog v-model="dialogVisible" title="拉群详情" width="40%" :before-close="handleClose">
		<div>
			<el-row :gutter="20">
				<el-col :span="8"
					><div class="grid-content ep-bg-purple" style="height: 100%; border-right: 1px solid #eee">
						<div style="width: 100%">
							<div style="width: 60%; height: 130px; margin-left: 20%">
								<img :src="dialogVisibledata.qrcode" style="width: 100%" />
							</div>
							<div style="text-align: center; margin-top: 15px">{{ dialogVisibledata.name }}</div>
							<div style="text-align: center; margin-top: 15px">
								<el-button
									type="primary"
									style="width: 100px"
									@click="downloadImage(dialogVisibledata.qrcode, dialogVisibledata.name)"
									>下载活码</el-button
								>
							</div>
							<!-- <div style="text-align: center; margin-top: 15px">
								<el-button style="width: 100px">修改</el-button>
							</div> -->
						</div>
					</div></el-col
				>
				<el-col :span="16"
					><div class="grid-content ep-bg-purple">
						<el-form :model="form" label-width="120px">
							<el-form-item label="创建时间：">{{ dialogVisibledata.create_time }}</el-form-item>
							<el-form-item label="成员：">
								<div>
									<el-tag size="large" v-for="item in dialogVisibledata.staffs" style="margin-left: 5px"
										><img
											:src="item.avatar"
											style="width: 20px; float: left; border-radius: 2px; align-items: center"
										/><span style="line-height: 20px; margin-left: 2px">{{ item.name }}</span></el-tag
									>
								</div>
							</el-form-item>
							<!-- <el-form-item label="上线成员：">
								<div>
									<el-tag size="large" v-for="item in dialogVisibledata.below.below" style="margin-left: 5px"
										><img
											:src="item.avatar"
											style="width: 20px; float: left; border-radius: 2px; align-items: center"
										/><span style="line-height: 20px; margin-left: 2px">{{ item.name }}</span></el-tag
									>
								</div>
							</el-form-item>
							<el-form-item label="下线成员：">
								<div>
									<el-tag size="large" v-for="item in dialogVisibledata.below.upper" style="margin-left: 5px"
										><img
											:src="item.avatar"
											style="width: 20px; float: left; border-radius: 2px; align-items: center"
										/><span style="line-height: 20px; margin-left: 2px">{{ item.name }}</span></el-tag
									>
								</div>
							</el-form-item> -->
							<!-- <el-form-item label="员工添加上限：">{{dialogVisibledata.is_astrict == 1?'已开启':'已关闭'}}</el-form-item> -->
							<el-form-item label="备用成员：">
								<div>
									<el-tag size="large" v-for="item in dialogVisibledata.standby" style="margin-left: 5px"
										><img
											:src="item.avatar"
											style="width: 20px; float: left; border-radius: 2px; align-items: center"
										/><span style="line-height: 20px; margin-left: 2px">{{ item.name }}</span></el-tag
									>
								</div>
							</el-form-item>

							<el-form-item label="拉群方式：">{{
								dialogVisibledata.type == 1 ? '群二维码拉群' : '企微活码拉群'
							}}</el-form-item>
							<el-form-item label="入群方式：">{{
								dialogVisibledata.join_type == 1 ? '直接入群' : '添加员工'
							}}</el-form-item>
							<el-form-item label="入群引导语：">{{ dialogVisibledata.welcome_text }}</el-form-item>
						</el-form>
					</div></el-col
				>
			</el-row>
		</div>
	</el-dialog>
	<el-dialog v-model="groupingshow" title="批量分组" width="30%" :before-close="handleClose">
		<el-select v-model="groupingdata" class="m-2" placeholder="请选择分组" size="large">
			<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id" />
		</el-select>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="groupingshow = false">取消</el-button>
				<el-button type="primary" @click="groupingshowapi">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style lang="scss">
@import url('../../../style/app-component.scss');
@import '../../../style/mixin.scss';
.el-table__body {
	width: 100%;
}
.groupchat-type {
	display: inline-block;
	background-color: #f6fbff;
	border: 1px solid #b0d8fe;
	border-radius: 2px;
	font-size: 12px;
	margin-top: 7px;
	float: left;
	margin-left: 5px;
	padding: 0 4px;
}
.groupchat-title {
	width: 130px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	margin-top: 3px;
	margin-left: 2px;
	float: left;
	margin-right: 4px;
}
.groupchat {
	border: 1px solid #eee;
	padding: 2px 5px;
	width: 200px;
	margin-top: 4px;
	height: 35px;
	display: inline-block;
}
.groupchat-img {
	width: 20px;
	height: 20px;
	float: left;
	border: 1px solid #eee;
	margin-top: 5px;
}
.qr-main {
	height: calc(100vh - 56px - 110px - 22px - 70px + 38px);
	display: flex;

	.file-icon {
		font-size: var(--app-font-6);
		font-weight: 800;
		color: var(--el-color-primary);
		margin-right: var(--app-block-margin);
	}

	.qr-main-left-nav {
		width: 220px;
		background: var(--app-white-back-color);
		margin-right: var(--app-block-margin);

		.qr-main-left-scroll {
			@include scrollBar;
		}
	}

	.cell-list {
		height: calc(100vh - 262px - 70px);
		overflow: auto;
		@include scrollBar;
		overflow: auto;
	}

	.cell-list-show-input {
		height: calc(100vh - 70px - 262px - var(--app-btn-height) - var(--app-container-padding) + 8px);
		overflow: auto;
		@include scrollBar;
		overflow: auto;
	}

	// table带check的样式
}

.table-head {
	height: 60px;
	margin-left: 14px;
}

.app-select-table-wh {
	height: calc(100vh - 70px - 64px - 110px - 22px - 80px - 20px - 50px + 38px);
	@include scrollBar;
	overflow: auto;
}

.select-table-body {
	background: var(--app-white-back-color);
	height: calc(100vh - 70px - 64px - 110px - 22px - 50px + 38px);
	width: calc(100% - 224px);
	padding: var(--app-container-padding);
}
</style>
